<template>
  <n-layout :native-scrollbar="false" class="layout" ref="scrollRef" style="background: #f2f2f2">
      <n-layout-content :native-scrollbar="false" class="core" style="background: transparent">
        <n-grid x-gap="12" cols="4" style="margin-top: 2rem">
          <n-gi span="1">
            <n-card :bordered="false"
                    :segmented="{
                      content: true,
                      footer: 'soft'
                    }"
                    v-if="role === 'student'"
            >
              <template #header>
                <n-space align="center">
                  <n-avatar
                      round
                      size="medium"
                      :src=userImage
                  />
                  <n-text>{{ userName }}</n-text>
                  <n-tag type="info" size="small">作者id：{{ userUuid }}</n-tag>
                </n-space>
              </template>
              <template #default>
                {{ userSignature }}
              </template>
              <template #footer>
                <n-space justify="space-evenly">

                </n-space>
              </template>
            </n-card>
            <n-card v-if="role === 'admin'">
              <n-card style="margin-bottom: 1.2rem">
                <template #header>
                  <n-button @click="back">返回</n-button>
                </template>
                  <h3>遵守期刊要求与格式规范：</h3>

                  <p>
                    确认文章是否遵循了目标期刊的具体要求，包括引用格式、字数限制、图表和表格的格式等。
                  检查文章是否符合双盲审稿标准，即是否移除了所有可能透露作者身份的信息。
                  </p>
                  <h3>内容质量和原创性：</h3>

                <p>
                  评估文章的论点是否清晰、有力且有新意。
                  检查研究方法是否适当，数据收集和分析是否严谨。
                  确认文章是否贡献了新的知识或见解，而非简单重复已有的工作。
                </p>
                <h3>结构和逻辑连贯性：</h3>

                <p>
                  文章的结构是否合理，各部分（如摘要、引言、方法、结果、讨论和结论）是否完整且相互衔接。
                  论文的论证过程是否逻辑清晰，前后一致，没有跳跃或缺失的部分。
                </p>
                <h3>语言表达和风格：</h3>

                <p>
                  文章的语言是否清晰、准确，避免模糊不清或过于复杂的表述。
                  检查语法、拼写和标点错误，确保文章的专业性和可读性。
                </p>
                <h3>引用和参考文献：</h3>

                <p>
                  核实引用的准确性和完整性，确保所有引用的文献都已在参考文献列表中列出。
                  检查引用是否符合学术诚信，避免抄袭或不当引用他人成果。
                </p>
              </n-card>
              <n-affix>
                <n-space justify="space-between">
                  <n-button type="error" @click="noPass">未通过</n-button>
                  <n-button type="success" @click="pass">通过</n-button>
                </n-space>
              </n-affix>
            </n-card>
          </n-gi>
          <n-gi span="3">
            <n-space justify="center" class="title-reade"> {{ title }} </n-space>
            <n-card >
              <div v-if="sectionValue !== null" :style="{border: 0+'px solid #ccc'}">
                <Toolbar
                    v-if="showToolbar"
                    style="border-bottom: 1px solid #ccc"
                    :editor="editorRef"
                    :defaultConfig="toolbarConfig"
                    :mode="mode"
                />
                <Editor
                    :style="{'min-height': '81vh','overflow-y': 'hidden'}"
                    v-model="valueHtml"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="handleCreated"
                />
              </div>
            </n-card>

          </n-gi>
        </n-grid>
      </n-layout-content>
    <n-layout-footer>
      <n-space justify="center">
        <n-text type="default" depth="3">到底了哦~</n-text>
      </n-space>
    </n-layout-footer>
  </n-layout>
  <ai-util :section="valueHtml"/>
</template>

<script setup>
import aiUtil from "@/components/utils/ai-util.vue";
import {ref, inject, defineExpose, defineProps, shallowRef, onBeforeUnmount, toRefs} from "vue";
import {useRoute} from "vue-router";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {addBrowse, getBlogByPostsId, getUserCardByUuidForPosts} from "@/res/api/blog_api.js";
import {getClassByClassId} from "@/res/api/class_api.js";
import {getNoteByNoteId} from "@/res/api/note_api.js";
import {Fail, getNeedReviewedPosts, passPostsAdmin} from "@/res/api/admin_api.js";
import router from "@/router/index.js";

defineExpose({
  name: 'read-communal'
})
// 初始参数
let title = ref('文章标题')
let valueHtml = ref('')
let userUuid = ref('')
let userImage = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
let userName = ref('还没有昵称')
let userSignature = ref('这个人很懒，什么都没留下')
const role = ref('')

// 路由传参
const route = useRoute()
role.value = route.meta.roles[0]
let {query} = toRefs(route)
let type = query.value.type
if (type === 'class'){
  getClassByClassId(query.value.classId).then(res => {
    console.log(res.data)
    valueHtml.value = res.data.classContent
    title.value = res.data.classTitle+query.value.node
    userUuid.value = 'AMX'
    userName.value = '我大管理'
    userSignature.value = '能不能不加班啊！！'
  }).catch(err => {
    $message.error(err.message)
  })
}
else if (type === 'posts'){
  // 获取文章信息
  getBlogByPostsId(
      {postsId:query.value.postsId}
  ).then(res =>{
    title.value = res.data.title
    valueHtml.value = res.data.content
  }).catch(err => {
    $message.error(err.message)
  })
  // 获取作者信息
  getUserCardByUuidForPosts(
      {Uuid:query.value.uuid}
  ).then(res => {
    console.log(res.data)
    userUuid.value = res.data.id
    userImage.value = res.data.imgUrlIcon
    userName.value = res.data.nickname
    userSignature.value = res.data.signature
    if (userSignature.value === '' || userSignature.value === null){
      userSignature.value = '这个人很懒，什么都没留下'
    }
  }).catch(err => {
    $message.error(err.message)
  })
  // 增加浏览量
  addBrowse(
      {postsId:query.value.postsId}
  ).then(res => {
    $message.success(res.message)
  }).catch(err => {
    $message.error(err.message)
  })
}
else if (type === 'classNote'){
  getNoteByNoteId(
      {noteId:query.value.classNoteId}
  ).then(res => {
    console.log(res.data)
    title.value = res.data.notetitle
    valueHtml.value = res.data.notejson
  }).catch(err => {
    $message.error(err.message)
  })
  // 获取作者信息
  getUserCardByUuidForPosts(
      {Uuid:query.value.uuid}
  ).then(res => {
    console.log(res.data)
    userUuid.value = res.data.id
    userImage.value = res.data.imgUrlIcon
    userName.value = res.data.nickname
    userSignature.value = res.data.signature
    if (userSignature.value === '' || userSignature.value === null){
      userSignature.value = '这个人很懒，什么都没留下'
    }
  }).catch(err => {
    $message.error(err.message)
  })
}
else if (type === 'article'){
  getNeedReviewedPosts(
      {postsId:query.value.postsId}
  ).then(res => {
    console.log(res)
    title.value = res.data.title
    console.log(title.value)
    valueHtml.value = res.data.content
    console.log(valueHtml.value)
  }).catch(err => {
    $message.error(err.message)
  })
}


// 文章审核
function pass(){
  passPostsAdmin(
      {id:query.value.postsId}
  ).then(res => {
    $message.success('审核通过')
    back()
  }).catch(err => {
    $message.error(err.message)
  })
}
function noPass(){
  Fail(
      {id:query.value.postsId}
  ).then(res => {
    $message.success('审核不通过')
    back()
  }).catch(err => {
    $message.error(err.message)
  })
}

const props = defineProps({
  showToolbar: {
    type: Boolean,
    default: false
  },
  // title: {
  //   // TODO: 完成后改为 true
  //   required: false,
  //   type: String,
  //   default: '文章标题'
  // },
  // sectionValue: {
  //   // TODO: 完成后改为 true
  //   required: false,
  //   type: String,
  //   default:"{'title':'文章标题','content':'文章内容'}"
  // }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = 'default'
// const valueHtml = ref(props.sectionValue)
//工具栏配置
const toolbarConfig = {

}
//编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  readOnly: true
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  // 记录 editor 实例，重要！
  editorRef.value = editor
}

// 返回方法
function back(){
  router.go(-1)
}
</script>

<style lang="scss" scoped>
.title-reade{
  background: #fff;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
</style>
